import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hx/base/utils/density_util.dart';
import 'package:flutter_hx/services/app_theme_services.dart';
import 'package:flutter_hx/widgets/goods_recommend_horizon_widget.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';

import '../../../router/app_pages.dart';
import 'home_logic.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.put(HomeLogic());
    return Stack(
      children: [
        Positioned(
            top: 0,
            right: 0,
            left: 0,
            child: Image.asset("assets/images/home_bg.png")),
        Positioned(
          top: Density.instance.appBarHeight,
          left: 10,
          right: 10,
          bottom: 0,
          child: Column(
            children: [
              Row(
                children: [
                  Expanded(
                      child: Container(
                    height: 32,
                    padding: const EdgeInsets.only(
                        left: 10, top: 2, bottom: 2, right: 2),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(48)),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Row(
                          children: [
                            Image.asset("assets/images/icon_home_search.png"),
                            const SizedBox(width: 10),
                            Text("请搜索你想要的商品",
                                style: AppThemeServices.textTheme.h12.copyWith(
                                    color: AppThemeServices
                                        .appColors.hintTextColor))
                          ],
                        ),
                        Container(
                          height: double.infinity,
                          alignment: Alignment.center,
                          padding: const EdgeInsets.symmetric(horizontal: 15),
                          decoration: BoxDecoration(
                              color: AppThemeServices.appColors.colorPrimary,
                              borderRadius: BorderRadius.circular(48)),
                          child: Text("搜索",
                              style: AppThemeServices.textTheme.h12
                                  .copyWith(color: Colors.white)),
                        )
                      ],
                    ),
                  ))
                ],
              ),
              Expanded(
                  child: SingleChildScrollView(
                child: Column(
                  children: [
                    const SizedBox(height: 18.5),
                    SizedBox(
                        height: 135,
                        child: Swiper(
                          itemBuilder: (context, index) {
                            return Image.network(
                                "https://alipic.lanhuapp.com/FigmaSlicePNGc3f224aa43738b00553127f54bb77f06.png");
                          },
                          pagination: SwiperPagination(
                              alignment: Alignment.bottomCenter,
                              builder: SwiperCustomPagination(
                                  builder: (context, config) {
                                final widgets = <Widget>[];
                                for (var i = 0; i < config.itemCount; i++) {
                                  widgets.add(Container(
                                      height: 5.5,
                                      width: 5.5,
                                      decoration: BoxDecoration(
                                          color: i == config.activeIndex
                                              ? Colors.white
                                              : const Color.fromRGBO(
                                                  216, 216, 216, 1),
                                          borderRadius:
                                              BorderRadius.circular(5))));
                                }
                                return Wrap(
                                  spacing: 6,
                                  children: widgets,
                                );
                              })),
                          itemCount: 3,
                        )),
                    const SizedBox(height: 10),
                    Row(
                      children: [
                        Expanded(
                          child: InkWell(
                            onTap: () => Get.toNamed(Routes.submitOrder),
                            // onTap: () =>
                            //     Get.toNamed(Routes.homeCategory, arguments: 1),
                            child: Column(
                              children: [
                                Image.asset(
                                  "assets/images/icon_home_lm_mall.png",
                                  width: 50,
                                  height: 50,
                                  gaplessPlayback: true,
                                  fit: BoxFit.cover,
                                ),
                                const SizedBox(height: 4),
                                Text(
                                  "联盟商城",
                                  style: AppThemeServices.textTheme.h12
                                      .copyWith(
                                          color: AppThemeServices
                                              .appColors.primarilyTextColor),
                                )
                              ],
                            ),
                          ),
                        ),
                        Expanded(
                          child: InkWell(
                            onTap: () =>
                                Get.toNamed(Routes.homeCategory, arguments: 2),
                            child: Column(
                              children: [
                                Image.asset(
                                  "assets/images/icon_home_yougon_mall.png",
                                  width: 50,
                                  height: 50,
                                  gaplessPlayback: true,
                                  fit: BoxFit.cover,
                                ),
                                const SizedBox(height: 4),
                                Text(
                                  "优购专区",
                                  style: AppThemeServices.textTheme.h12
                                      .copyWith(
                                          color: AppThemeServices
                                              .appColors.primarilyTextColor),
                                )
                              ],
                            ),
                          ),
                        ),
                        Expanded(
                          child: InkWell(
                            onTap: () =>
                                Get.toNamed(Routes.homeCategory, arguments: 3),
                            child: Column(
                              children: [
                                Image.asset(
                                  "assets/images/icon_home_yg_mall.png",
                                  width: 50,
                                  height: 50,
                                  gaplessPlayback: true,
                                  fit: BoxFit.cover,
                                ),
                                const SizedBox(height: 4),
                                Text(
                                  "易购专区",
                                  style: AppThemeServices.textTheme.h12
                                      .copyWith(
                                          color: AppThemeServices
                                              .appColors.primarilyTextColor),
                                )
                              ],
                            ),
                          ),
                        ),
                        Expanded(
                          child: InkWell(
                            onTap: () =>
                                Get.toNamed(Routes.order, arguments: 4),
                            child: Column(
                              children: [
                                Image.asset(
                                  "assets/images/icom_home_yx_mall.png",
                                  width: 50,
                                  height: 50,
                                  gaplessPlayback: true,
                                  fit: BoxFit.cover,
                                ),
                                const SizedBox(height: 4),
                                Text(
                                  "优选商城",
                                  style: AppThemeServices.textTheme.h12
                                      .copyWith(
                                          color: AppThemeServices
                                              .appColors.primarilyTextColor),
                                )
                              ],
                            ),
                          ),
                        )
                      ],
                    ),
                    const SizedBox(height: 15),
                    Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 10.5, horizontal: 10),
                      child: Row(
                        children: [
                          Image.asset("assets/images/icon_home_notice.png",
                              width: 70.75,
                              height: 14,
                              gaplessPlayback: true,
                              fit: BoxFit.fill),
                          const SizedBox(width: 10),
                          Container(
                              color: const Color.fromRGBO(200, 201, 204, 1),
                              width: 0.5,
                              height: 13),
                          const SizedBox(width: 10),
                          Expanded(
                              child: Text("本次版本更新调整了用户闪退支付等bug",
                                  maxLines: 1,
                                  overflow: TextOverflow.ellipsis,
                                  style: AppThemeServices.textTheme.h12
                                      .copyWith(
                                          color: Colors.black,
                                          fontWeight: FontWeight.w500)))
                        ],
                      ),
                    ),
                    const SizedBox(height: 10),
                    SizedBox(
                        height: 200,
                        child: Row(
                          children: [
                            Expanded(
                                child: Image.asset(
                              "assets/images/home_vip_banner.png",
                              height: double.infinity,
                              width: double.infinity,
                              fit: BoxFit.fill,
                            )),
                            const SizedBox(width: 8),
                            Expanded(
                                child: Column(
                              children: [
                                Expanded(
                                    child: Container(
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 9, vertical: 10),
                                  decoration: const BoxDecoration(
                                      image: DecorationImage(
                                          image: AssetImage(
                                              "assets/images/home_yougou_bg.png"),
                                          fit: BoxFit.fill)),
                                  child: Row(
                                    children: [
                                      Expanded(
                                          child: Column(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              Text("优购专区",
                                                  style: AppThemeServices
                                                      .textTheme.h14
                                                      .bold()
                                                      .copyWith(
                                                          color: AppThemeServices
                                                              .appColors
                                                              .primarilyTextColor)),
                                              const SizedBox(height: 6),
                                              Text("精选优购在这里",
                                                  style: AppThemeServices
                                                      .textTheme.h12
                                                      .copyWith(
                                                          color: AppThemeServices
                                                              .appColors
                                                              .hintTextColor))
                                            ],
                                          ),
                                          Text("去看看 >>",
                                              style: AppThemeServices
                                                  .textTheme.h12
                                                  .copyWith(
                                                      color:
                                                          const Color.fromRGBO(
                                                              14, 200, 182, 1)))
                                        ],
                                      ))
                                    ],
                                  ),
                                )),
                                const SizedBox(height: 8),
                                Expanded(
                                    child: Container(
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 9, vertical: 10),
                                  decoration: const BoxDecoration(
                                      image: DecorationImage(
                                          image: AssetImage(
                                              "assets/images/icon_yg_bg.png"),
                                          fit: BoxFit.fill)),
                                  child: Row(
                                    children: [
                                      Expanded(
                                          child: Column(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            children: [
                                              Text("易购专区",
                                                  style: AppThemeServices
                                                      .textTheme.h14
                                                      .bold()
                                                      .copyWith(
                                                          color: AppThemeServices
                                                              .appColors
                                                              .primarilyTextColor)),
                                              const SizedBox(height: 6),
                                              Text("易购商品等你来逛",
                                                  style: AppThemeServices
                                                      .textTheme.h12
                                                      .copyWith(
                                                          color: AppThemeServices
                                                              .appColors
                                                              .hintTextColor))
                                            ],
                                          ),
                                          Text("去看看 >>",
                                              style: AppThemeServices
                                                  .textTheme.h12
                                                  .copyWith(
                                                      color:
                                                          const Color.fromRGBO(
                                                              14, 200, 182, 1)))
                                        ],
                                      ))
                                    ],
                                  ),
                                ))
                              ],
                            ))
                          ],
                        )),
                    const SizedBox(height: 8),
                    Image.asset("assets/images/home_share_banner.png",
                        width: double.infinity,
                        height: 93,
                        fit: BoxFit.fitHeight),
                    const SizedBox(height: 10.5),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 10.5),
                      child: GoodsRecommendHorizonWidget(
                          title: "为您精选推荐",
                          titleStyle: AppThemeServices.textTheme.h16
                              .bold()
                              .copyWith(color: Colors.black)),
                    ),
                    SingleChildScrollView(
                      child: Container(
                        color: const Color(0xFFF7F8FA),
                        width: double.infinity,
                        padding: const EdgeInsets.only(top: 10),
                        child: StaggeredGridView.countBuilder(
                          padding: const EdgeInsets.only(top: 0),
                          crossAxisCount: 4,
                          itemCount: logic.records?.length,
                          itemBuilder: (BuildContext context, int index) {
                            return InkWell(
                              onTap: () => Get.toNamed(Routes.goodsDetail),
                              child: Container(
                                  color: Colors.white,
                                  child: Column(
                                    children: [
                                      Container(
                                        padding: const EdgeInsets.all(20),
                                        child: Image.asset(
                                          "assets/images/home_vip_banner.png",
                                          height: 120,
                                          width: 120,
                                          fit: BoxFit.fill,
                                        ),
                                      ),
                                      Container(
                                        height: 50,
                                        alignment: Alignment.center,
                                        width: double.infinity,
                                        padding: const EdgeInsets.all(5),
                                        child: Text(
                                          '联想笔记本电IdeaPad 2022 15.6英寸轻...',
                                          style: AppThemeServices.textTheme.h12
                                              .copyWith(
                                                  color:
                                                      const Color(0xFF323233)),
                                        ),
                                      ),
                                      Container(
                                        height: 30,
                                        alignment: Alignment.centerLeft,
                                        width: double.infinity,
                                        padding: const EdgeInsets.all(5),
                                        child: Text(
                                          '¥1599.00',
                                          style: AppThemeServices.textTheme.h12
                                              .copyWith(
                                                  color:
                                                      const Color(0xFFEE0A24)),
                                        ),
                                      )
                                    ],
                                  )),
                            );
                          },

                          staggeredTileBuilder: (index) {
                            return const StaggeredTile.fit(2);
                          },
                          // staggeredTileBuilder: (int index) =>
                          //     StaggeredTile.count(2, index.isEven ? 1.2 : 1),
                          mainAxisSpacing: 8,
                          crossAxisSpacing: 8,
                          physics: const NeverScrollableScrollPhysics(),
                          shrinkWrap: true,
                        ),
                      ),
                    ),
                  ],
                ),
              ))
            ],
          ),
        )
      ],
    );
  }
//
// Widget _cardItem() {}
}
